/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../EventPosting.less';
import { Collapse, Icon, Select, Input, Tooltip, Form, Row, Col, TreeSelect, Tag, message, Tree, Spin } from 'antd';
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const { SHOW_CHILD } = TreeSelect;
const { TreeNode } = Tree;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1315525_lex3d32v32.js',
});
var flag = false
class Edit_Wrap extends Component {
    state = {
        expandedKeys2: [],
        autoExpandParent2: true,
        checkedKeys2: [],
        selectedKeys2: [],
        treeData2: [],
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        treeData: [],
        spinning: true,
        checkedKeysFlag: false,
        checkedKeys2Flag: false,
        checkArr: []
    };

    componentDidMount() {
        // console.log(this.props)

        request({
            url: `/pm-web/projectmanage/progress/findTwoTree`,
            method: 'POST',
            data: {
                changeId: this.props.changeId,
                projectId: this.props.id
            },
        }).then(data => {

            this.setState({
                //   data:data.ret
                spinning: false,
                treeData: data.ret.basicTree,
                expandedKeys: data.ret.keys,
                expandedKeys2: data.ret.keys,
                treeData2: data.ret.selectedTree,
                checkedKeys: data.ret.selectedIds,
                checkArr: data.ret.selectedIds,

            })
        })
    }

    onExpand = expandedKeys => {
        // console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

    onCheck = checkedKeys => {
        // console.log('onCheck', checkedKeys);
        if (checkedKeys.length > 0) {
            this.setState({ checkedKeysFlag: true, checkedKeys2Flag: false, checkedKeys2: [] });
        } else {
            this.setState({ checkedKeysFlag: false, checkedKeys2Flag: false });
        }
        this.setState({ checkedKeys: [...checkedKeys, ...this.state.checkArr] });



    };

    onCheck2 = checkedKeys2 => {
        // console.log('onCheck', checkedKeys2);
        if (checkedKeys2.length > 0) {
            this.setState({ checkedKeys2Flag: true, checkedKeysFlag: false, checkedKeys: [] });
        } else {
            this.setState({ checkedKeys2Flag: false, checkedKeysFlag: false });
        }
        this.setState({ checkedKeys2 });
    };



    onSelect = (selectedKeys, info) => {
        // console.log('onSelect', info);
        this.setState({ selectedKeys });
    };



    onExpand2 = expandedKeys2 => {
        // console.log('onExpand', expandedKeys2);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys2,
            autoExpandParent2: false,
        });
    };



    onSelect2 = (selectedKeys, info) => {
        // console.log('onSelect', info);
        this.setState({ selectedKeys2: selectedKeys });
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} icon={<IconFont type={item.icon} style={{ fontSize: 24 }} />} selectable={item.selectable}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} selectable={item.selectable} />} />;
        });

    onLeft = () => {

        let params = {
            projectId: this.props.id,
            ids: this.state.checkedKeys,
            changeId: this.props.changeId
        }

        request({
            url: `/pm-web/projectmanage/progress/findTwoTree`,
            method: 'POST',
            data: {
                changeId: this.props.changeId,
                projectId: this.props.id
            },
        }).then(data => {

            this.setState({
                //   data:data.ret
                treeData: data.ret.basicTree,
                expandedKeys: data.ret.selectedIds,
                expandedKeys2: data.ret.selectedIds,
                treeData2: data.ret.selectedTree,
                checkedKeys: data.ret.selectedIds,
                checkArr: data.ret.selectedIds,

            })
        })

    }

    onRight = () => {
        // console.log('向右')
    }

    fanhui = () => {
        this.props.fanhui2()
    }


    saveDataTwo = () => {
        this.setState({
            spinning:true
        })
        request({
            url: `/pm-web/projectmanage/progress/saveDataTwo`,
            method: 'POST',
            data: {
                changeId: this.props.changeId,
                projectId: this.props.id
            },
        }).then(data => {
            if(data.rc === 0) {
                message.success('操作成功')
                this.fanhui()
            }else{
                message.warning(`${data.err}`)
            }
            this.setState({
                spinning:false
            })
        })
    }


    onSave = () => {


        // request({
        //     url: `/pm-web/projectmanage/progress/findTwoTree`,
        //     method: 'POST',
        //     data: {
        //         changeId: this.props.changeId,
        //         projectId: this.props.id
        //     },
        // }).then(data => {

        //     this.setState({
        //         spinning: false,
        //         treeData: data.ret.basicTree,
        //         expandedKeys: data.ret.keys,
        //         expandedKeys2: data.ret.keys,
        //         treeData2: data.ret.selectedTree,
        //         checkedKeys: data.ret.selectedIds,
        //         checkArr: data.ret.selectedIds,

        //     })
        // })

        request({
            url: `/pm-web/projectmanage/eventinfo/getTwoTree?projectId=${this.props.id}`,
            method: 'GET',

        }).then(data => {

            this.setState({
                spinning: false,
                treeData: data.ret.basicTree,
                expandedKeys: data.ret.keys,
                expandedKeys2: data.ret.keys,
                treeData2: data.ret.selectedTree,
                checkedKeys: data.ret.selectedIds,
                checkArr: data.ret.selectedIds,

            })
        })

    }

    //添加
    tianjia = () => {
        // console.log(this.state.checkedKeys)
        if(!this.state.checkedKeysFlag){
            return
        }
        if (this.state.checkedKeys.length < 1) {
            message.warning('请选择添加事件!')
            return
        }

        this.setState({
            spinning:true
        })
        let params = {
            ids: this.state.checkedKeys,
            projectId: this.props.id,
            changeId: this.props.changeId
        }
        request({
            url: '/pm-web/projectmanage/progress/theNewEvent',
            method: 'POST',
            data: params
        }).then(data => {
            // console.log(data)
            if (data.rc === 0) {
                message.success('添加成功!')
                flag = true
                this.onSave()
            } else {
                message.warning(`${data.err}`)
            }
            this.setState({
                spinning:false
            })
        })


    }

    //删除
    onDelete = () => {
        // console.log(this.state.checkedKeys2)
        if(!this.state.checkedKeys2Flag){
            return
        }
        if (this.state.checkedKeys2.length < 1) {
            message.warning('请选择删除事件!')
            return
        }
        this.setState({
            spinning:true
        })
        let params = {
            ids: this.state.checkedKeys2,
            projectId: this.props.id,
            changeId: this.props.changeId
        }
        request({
            url: '/pm-web/projectmanage/progress/deleteEvents',
            method: 'POST',
            data: params
        }).then(data => {
            // console.log(data)
            if (data.rc === 0) {
                this.setState({
                    checkedKeys2: []
                })
                flag = true
                message.success('删除成功!')
                this.onSave()
            } else {
                message.warning(`${data.err}`)
            }
            this.setState({
                spinning:false
            })
        })
    }



    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }



        return (
            <Spin tip="Loading..." spinning={this.state.spinning}>
                <div style={{ margin: 10, marginBottom: 0, marginTop: 0, height: '86vh', backgroundColor: '#F6FCFC', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3 }}>
                    <div style={{ height: '30px', backgroundColor: '#D6EDEB', display: 'flex', alignItems: 'center', flexDirection: 'row', borderRadius: 3, border: '2px solid #fff', paddingLeft: 15 }}>编辑事件</div>
                    <div className={styles.warpBox} style={{ height: '75vh', backgroundColor: '#F6FCFC', overflow: 'auto' }}>

                        <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex' }}>
                            <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', height: '75vh' }}>
                                <div style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff', marginTop: 3 }}>待选取</div>
                                <div style={{ flex: 1, overflow: 'auto', maxHeight: '75vh', borderRadius: 3, backgroundColor: '#fff', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", margin: 3, width: '100%' }}>
                                    <Tree
                                        showIcon
                                        checkable
                                        onExpand={this.onExpand}
                                        expandedKeys={this.state.expandedKeys}
                                        autoExpandParent={this.state.autoExpandParent}
                                        onCheck={this.onCheck}
                                        checkedKeys={this.state.checkedKeys}
                                        onSelect={this.onSelect}
                                        selectedKeys={this.state.selectedKeys}
                                    // checkStrictly={true}
                                    >
                                        {this.renderTreeNodes(this.state.treeData)}
                                    </Tree>
                                </div>

                            </div>
                            <div style={{ flex: 1, display: 'flex', alignItems: 'center', flexDirection: 'column', backgroundColor: '#f7f5f5', justifyContent: 'space-around' }}>
                                <div style={{ color: '#fff', width: 80, height: 26, background: this.state.checkedKeysFlag ? '#00BB96' : '#ccc', borderRadius: 14, textAlign: 'center', lineHeight: '26px', cursor: 'pointer' }} onClick={this.tianjia}>添加</div>

                                <div style={{ color: '#fff', width: 80, height: 26, background: this.state.checkedKeys2Flag ? '#ED424E' : "#ccc", borderRadius: 14, textAlign: 'center', lineHeight: '26px', border: '1px solid #ccc', cursor: 'pointer' }} onClick={this.onDelete}>删除</div>

                            </div>


                            <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', height: '75vh' }}>
                                <div style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff', marginTop: 3 }}>已选取</div>
                                <div style={{ flex: 1, overflow: 'auto', maxHeight: '75vh', borderRadius: 3, backgroundColor: '#fff', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", margin: 3, width: '100%' }}>
                                    <Tree
                                        showIcon
                                        checkable
                                        onExpand={this.onExpand2}
                                        expandedKeys={this.state.expandedKeys2}
                                        autoExpandParent={this.state.autoExpandParent2}
                                        onCheck={this.onCheck2}
                                        checkedKeys={this.state.checkedKeys2}
                                        onSelect={this.onSelect2}
                                        selectedKeys={this.state.selectedKeys2}
                                    // checkStrictly={true}
                                    >
                                        {this.renderTreeNodes(this.state.treeData2)}
                                    </Tree>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div className={styles.Bottom_Box} style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: '7vh' }}>
                        <div style={{ color: '#fff', width: 136, height: 32, background: 'rgba(0,171,187,1)', borderRadius: 14, textAlign: 'center', lineHeight: '32px', cursor: 'pointer' }} onClick={this.saveDataTwo}>保存</div>

                        <div style={{ color: 'red', width: 136, height: 32, background: '#fff', borderRadius: 14, textAlign: 'center', lineHeight: '32px', border: '1px solid #ccc', cursor: 'pointer' }} onClick={this.fanhui}>关闭</div>
                    </div>
                </div>
            </Spin>
        );


    }
}
export default Edit_Wrap;

